<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/12/26
  Time: 20:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/wzycss/wzyindex/wzy-index.css">
</head>

<body>
<%@ include file="../wzycommon/nav.jsp" %>
    <!-- 轮播 begin -->
    <div class="container-fluid" id="lunbo">
        <div class="row">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="${path}/wzyimgs/lunfan1.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="${path}/wzyimgs/lunfan2.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="${path}/wzyimgs/lunfan3.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next">&rsaquo;</a>
            </div>
        </div>
    </div>

    <!-- 轮播end -->

    <!-- 搜索框begin - 输入框组 -->
    <div class="container-fluid" style="margin-top: 10px;">
        <div class="row">
            <div class="col-md-4" style="padding: 0;">
                <form action="/food" class="bs-example bs-example-form" role="form">
                    <div class="input-group">
                        <input name="input-group" value='${searchName}' type="text"
                               class="form-control"
                               placeholder="请输入菜品的名称">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>

            <!-- 操作的按钮 -->
            <c:if test="${userLogin.power == 0}">
                <div class="col-md-8" id="opt_btn">
                    <button type="button" class="btn btn-default">新增菜品</button>
                    <button type="button" class="btn btn-danger"
                            onclick="delMore()">批量删除</button>
                </div>
            </c:if>
        </div>
    </div>

    <!-- 煲类缩略图begin -->
    <div class="container-fluid" id="suo_img" style="margin-top: 10px;">
        <div class="baolei" style="text-align: center;">菜品</div>
        <hr>
        <div class="row">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <input type="checkbox" name="" >

                        <img src="${path}/wzyimgs/rxb.jpg"
                             alt="通用的占位符缩略图" onclick="img_detail()" >
                        <div class="caption">
                            <h3 class="text-center">
                                <a href="${path}/wzy-cpjs1">肉蟹煲</a>
                            </h3>
                            <p class="text-danger">
                                    <span class="glyphicon glyphicon-trash"></span>
                            </p>
                        </div>
                    </div>
                 </div>
                <div class="col-md-3">
                    <div class="thumbnail">
                        <input type="checkbox" name="" >

                        <img src="${path}/wzyimgs/kwlb.jpg"
                             alt="通用的占位符缩略图" onclick="img_detail()" >
                        <div class="caption">
                            <h3 class="text-center">
                                <a href="${path}/wzy-cpjs2"> 开胃萝卜</a>
                            </h3>

                            <p class="text-danger">

                                    <span class="glyphicon glyphicon-trash"></span>

                            </p>
                        </div>
                    </div>
                </div>
            <c:forEach items="${foods}" var="f">
            <div class="col-md-3">
                <div class="thumbnail">
                    <input type="checkbox" name="" id="" value="${f.id}">
                    <img src="${path}/wzyimgs/${f.imgUrl}"
                         alt="通用的占位符缩略图" onclick="img_detail()" >
                    <div class="caption">
                        <h3 class="text-center">${f.foodName}  </h3>

                        <c:if test="${userLogin.power==0}">
                            <p class="text-danger">
                                <a class="text-danger" href="${path}/del?id=${b.id}">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </a>
                            </p>
                        </c:if>
                    </div>
                </div>
            </div>
            </c:forEach>
        </div>
    </div>

    <hr>

    <div class="foot">
        <br>
        <div class="foot_logo">
            <img src="${path}/wzyimgs/xia.png" width="121" height="117" />
            <h1>Follow me</h1>
        </div>
        <div class="foot-tu" >
            <img src="${path}/wzyimgs/foot-tu.png" width="300px" height="70px">
        </div>
        <br>
        <div class="last">© 2019 嘉兴盐商餐饮管理有限公司 All rights reserved 浙ICP备19041101号</div>

    </div>

    <script>
        // 控制轮播自动轮播时间
        $('#myCarousel').carousel({
            interval: 1000
        })
    </script>

    <script>
        function img_detail(){
            window.location="12-detail.html";
        }
    </script>

    <script>
        //批量删除
        function delMore(){
            //1. 获取所有的checkbox - 根据checkbox的name属性的值
            //返回得到的是一个数组
            var cks = document.getElementsByName("cks");

            //3 - 编程的起点 - 从变量开始
            //定义一个计数器
            var count = 0;

            //2.循环遍历这个数组
            for(var i=0;i<cks.length;i++){
                //如果有一个checkbox被选中了，那么count++
                if(cks[i].checked){
                    count++;
                }
            }

            //如果count==0，就代表没有一个被选中了...
            if(count==0){
                alert("sorry,please click delete one");
                return;
            }

            //确认框
            var flag = confirm("确定删除吗？");

            if(flag){
                //确定删除...
                //定义一个变量 - 用来拼接选中的id
                var ids = "";
                //遍历所有的cks
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        ids += cks[i].value+":";
                    }
                }
                alert("===")
                //js发送数据到后台
                window.location="${path}/delMore?ids="+ids.substring(0,ids.length-1);

            }


        }
    </script>

    <script src="${path}/plugins/jquery/jquery.min.js"></script>
    <script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</body>
</html>
